import React, { useContext } from 'react'
import { Space, Select, Input, Button, Cascader } from 'antd'
import style from './style.module.less'
import { hospitalAdminUserContext } from '../../../context'
import IconSvg from '@/components/IconSvg'
import BottomComponent from '../bottom/index'

export default () => {
  const { cityTopConfig, topConfigData } = useContext(hospitalAdminUserContext)
  return (
    <div className={style.cityBox}>
      <div className={style.top}>
        <Space>
          <Cascader
            style={{ width: 200 }}
            options={cityTopConfig.cityCascader}
            expandTrigger='hover'
            placeholder='请选择地区'
            onChange={cityTopConfig.getAreaSelectValue}
          />

          <Select
            style={{ width: 200 }}
            showSearch
            placeholder='登录次数查询'
            optionFilterProp='children'
            onChange={cityTopConfig.getLoginTimeSelectValue}
            filterOption={(input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={topConfigData.topSelectorData}
          />

          <Input
            suffix={<IconSvg onClick={cityTopConfig.inputEnter} name='search' />}
            onChange={cityTopConfig.getInputNamePhoneValue}
            onPressEnter={cityTopConfig.inputEnter}
            placeholder='负责人姓名/手机'
          />
        </Space>

        <div className={style.btnBox}>
          <Button onClick={cityTopConfig.addAdmin}>
            <IconSvg name='addAdmin' style={{ marginRight: 5 }} />
            新增管理员
          </Button>
        </div>
      </div>
      <div className={style.bottom}>
        <BottomComponent />
      </div>
    </div>
  )
}
